<template>
  <div class="canvas-login">
    <el-card class="box-card">
      <div>
        <div class="title">
          BREAST&nbsp;&nbsp;CANCER&nbsp;&nbsp;RISK&nbsp;&nbsp;ANALYSIS&nbsp;&nbsp;SYSTEM
        </div>
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          label-width="150px"
          class="demo-loginForm"
          hide-required-asterisk
          status-icon
        >
          <el-form-item label="Phone:" prop="phone" class="labelSize">
            <el-input
              v-model="loginForm.phone"
              placeholder="user phone"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="Password:" prop="password" class="labelSize">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              :type="flag ? 'text' : 'password'"
              placeholder="user password"
              size="large"
            >
              <i
                slot="suffix"
                :class="[flag ? 'el-icon-minus' : 'el-icon-view']"
                autocomplete="auto"
                @click="flag = !flag"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="isLock" label="Testing:" class="labelSize">
            <slider-verify-code
              v-model="loginForm.isLock"
              @change="handlerLock"
            ></slider-verify-code>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked" class="rememberPosition"
              >Remember me</el-checkbox
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm(loginForm), rememberUser()"
            >
              Login
            </el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="success" @click="submitRegister()"
              >Register</el-button
            >
            &nbsp;&nbsp;&nbsp;&nbsp;
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-footer class="pa-3">
      <span class="caption">
        &copy; Copyright {{ new Date().getFullYear() }} , LT-BCRA MEDICINE
      </span>
    </el-footer>
  </div>
</template>

<script>
import sliderVerifyCode from "@/components/slider-verify-code.vue";
export default {
  name: "Login",
  components: {
    "slider-verify-code": sliderVerifyCode,
  },
  data() {
    const checkStatus = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("Please slide the slider to the right"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        phone: "",
        password: "",
        isLock: "",
      },
      checked: true,
      flag: false,
      rules: {
        phone: [
          {
            required: true,
            message: "Please input a phone number",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "Cell phone number format error",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input a password",
            trigger: "blur",
          },
          {
            min: 6,
            max: 13,
            message: "The length is between 6 and 13 characters",
            trigger: "blur",
          },
        ],
        isLock: [{ required: true, validator: checkStatus, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(loginForm) {
      this.$refs.loginForm.validate((valid) => {
        console.log(loginForm);
        if (valid) {
          //alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
        this.$router.push({
          name: "Home",
          params: {
            phone: loginForm.phone,
            password: loginForm.password,
          },
        });
        this.$message({
          type: "success",
          message: "Login success",
        });
      });
    },
    handlerLock(data) {
      if (data) {
        this.$refs.loginForm.validateField(this.loginForm.isLock);
      }
    },
    submitRegister() {
      this.$router.push("/register");
    },
    // 记住用户
    rememberUser() {
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (this.checked == true) {
        //传入账号名，密码，和保存天数三个参数
        this.setCookie(this.loginForm.phone, this.loginForm.password, 7);
      } else {
        //清空Cookie
        this.clearCookie();
      }
    },
    //设置cookie
    setCookie(c_phone, c_pwd, exdays) {
      let exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数 7天
      //字符串拼接cookie
      window.document.cookie =
        "phone" + "=" + c_phone + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    // 读取cookie
    getCookie: function () {
      //从cooike中取值
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下 cookie包含多种信息
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); //再次切割 这里是name=value进行切割的
          //判断查找相对应的值
          if (arr2[0] == "phone") {
            this.loginForm.phone = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            this.loginForm.password = arr2[1];
          }
        }
      }
      //注册后回显
      if (this.$route.params.phone && this.$route.params.password) {
        this.loginForm.phone = this.$route.params.phone;
        this.loginForm.password = this.$route.params.password;
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改两个值都为空，天数为-1天就好了
    },
  },
};
</script>

<style scoped>
.canvas-login {
  background-image: url("@/assets/img/newlogin.jpg");
  background-repeat: no-repeat;
  /* 放大缩小会让图片改变 */
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
}
.box-card {
  text-align: center;
  background: rgba(234, 241, 239, 0.76);
  border-radius: 20px;
  width: 40%;
  height: 50%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.title {
  text-align: center;
  margin-top: 7%;
  font-size: 30px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}
.demo-loginForm {
  margin-left: 8%;
  margin-top: 7%;
  width: 500px;
}
.rememberPosition {
  margin-left: 63%;
}
</style>
<style>
.labelSize .el-form-item__label {
  font-size: 20px;
  font-weight: 600;
  color: rgba(44, 44, 44, 0.678);
}
.pa-3 {
  margin-top: 44%;
  margin-left: 42%;
}
</style>
